import React, { useState, useEffect, useRef } from 'react';
import { Tabs, Layout } from 'antd';

import List from '../components/task/List.js';
import CompletedList from '../components/task/CompletedList.js';
import UserInfo from '../components/user/Info.js';

const { Header, Content } = Layout;

const Home = () => {
  const contentRef = useRef(null);
  const [contentHeight, setContentHeight] = useState(0);
  const [isHeightReady, setIsHeightReady] = useState(false);
  const listRef = useRef(null);
  const completedRef = useRef(null);

  useEffect(() => {
    if (contentRef.current) {
      const height = contentRef.current.offsetHeight;
      setContentHeight(height);
      setIsHeightReady(true);
    }
  }, []);

  // Tabs 的 items 数据
  const tabItems = [
    {
      key: 'list',
      label: '任务列表',
      children: (
        <List ref={listRef} contentHeight={contentHeight} isHeightReady={isHeightReady}></List>
      ),
    },
    {
      key: 'completedList',
      label: '已完成任务',
      children: (
        <CompletedList ref={completedRef} contentHeight={contentHeight} isHeightReady={isHeightReady}></CompletedList>
      )
    },
  ];

  const handleTabChange = (active) => {
    switch (active) {
      case 'list':
        listRef.current?.refresh();
        break;
      case 'completedList':
        completedRef.current?.refresh();
        break;
      default:
    }
  };

  const headerStyle = {
    position: 'relative',
    height: '60px',
    lineHeight: '60px',
    verticalAlign: 'middle',
    textAlign: 'center',
    fontSize: '22px',
    fontWeight: 700
  };

  const userButtonStyle = {
    position: 'absolute',
    right: '18px',
    top: '10px'
  };

  return (
    <>
      {/* 顶部标题 */}
      <Layout style={{ height: '100%' }}>
        <Header style={headerStyle}>
          <span>请开始使用你的 todolist</span>
          <UserInfo style={userButtonStyle}></UserInfo>
        </Header>
        <Content ref={contentRef} style={{ padding: '20px' }}>
          {/* Tabs 区域 */}
          <Tabs defaultActiveKey="0" items={tabItems} onChange={handleTabChange}/>
        </Content>
      </Layout>
      {/*</div>*/}
    </>
  );
};

export default Home;
